<template>
  <el-space :size="2" :spacer="spacer">
    <template v-for="(item, i) in actionList" :key="i">
      <component :is="item" />
    </template>
    <el-dropdown v-if="dropdownList.length" trigger="click" :hide-on-click="false">
      <el-link type="primary" underline="never">
        <div class="flex-a">
          <div>更多</div>
          <el-icon class="ml-2px">
            <ArrowDown />
          </el-icon>
        </div>
      </el-link>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(child, k) in dropdownList" :key="props.max + k" :divided="dropdownListProps[k].divided" :disabled="dropdownListProps[k].disabled">
            <component :is="child" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-space>
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ElDivider } from 'element-plus'

const props = defineProps({
  max: {
    type: Number,
    default: 4,
  },
})

const spacer = h(ElDivider, { direction: 'vertical' })

const slots = useSlots()
const defaultSlot = slots.default && slots.default().filter(v => typeof v.type !== 'symbol')

const actionList = ref([])
const dropdownList = ref([])
const dropdownListProps = ref([])

if (defaultSlot.length > props.max) {
  actionList.value = defaultSlot.slice(0, props.max - 1)
  dropdownList.value = defaultSlot.slice(props.max - 1)
  const values = ['', 1, true]
  dropdownListProps.value = dropdownList.value.map(v => ({
    divided: values.includes(v.props?.divided),
    disabled: values.includes(v.props?.disabled),
  }))
}
else {
  actionList.value = defaultSlot
}
</script>

<style lang="scss">
.el-dropdown-menu__item>* {
  width: 100%;
  text-align: center;
}
</style>
